﻿@page "/docs/services/notification"
@page "/docs/services/notification-provider"

<Seo Canonical="/docs/services/notification-provider" Title="Blazorise Notification service" Description="The INotificationService is a powerful helper utility built on top of Snackbar component and is used for showing simple alerts and notifications." />

<DocsPageTitle Path="Services/Notification">
    Blazorise Notification service
</DocsPageTitle>

<DocsPageLead>
    Notification service is used to provide feedback to the user.
</DocsPageLead>

<DocsPageParagraph>
    They communicate information about activities, processes, and events in the application.
</DocsPageParagraph>

<DocsPageParagraph>
    The <Code>INotificationService</Code> is built on top of <Code>Snackbar</Code> component and is used for showing simple
    alerts and notifications.
</DocsPageParagraph>

<DocsPageSubtitle>
    Quick Setup
</DocsPageSubtitle>

<DocsPageParagraph>
    To install and use Notifications you just need to follow a few simple steps.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Step 1: Download from NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="NotificationServiceInstallationExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Step 2. Define Usings">
        Since notification service is created as a wrapper around the <Code>Snackbar</Code> component so it is also required to define the namespace inside of your main <Badge Color="Color.Light">_Imports.razor</Badge> file.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarImportsExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Step 3. Define wrapper component">
        <Code>INotificationService</Code> is automatically registered by Blazorise but it needs just one thing on your side
        to make it work. You need to place <Code>NotificationProvider</Code> somewhere in your application razor code. It can
        be placed anywhere, but a good approach is to place it in <Code>App.razor</Code> like in the following example.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="NotificationServiceUsageExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Step 4. Static files">
        This step is only needed if you didn't already define any CSS files for the Snackbar component. Remember,  The <Code>INotificationService</Code> is built on top of <Code>Snackbar</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarResourcesExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        Once you’re done you can start using it by injecting the <Code>INotificationService</Code> in your page and then simple
        calling the built-in methods.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <BasicNotificationServiceExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicNotificationServiceExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Options">
        You can customize the notification by passing additional options like duration, button text, icons, and layout using a configuration callback.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <NotificationServiceWithOptionsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NotificationServiceWithOptionsExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Best Practices
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Use Sparingly
</Heading>

<DocsPageParagraph>
    Notifications are disruptive by design and should be used sparingly. Use fewer notifications by reserving them for more important information that may otherwise go unnoticed by the user.
</DocsPageParagraph>

<DocsPageParagraph>
    Less urgent notifications can be provided through a link or drop-down in the application header or footer, instead of immediate notifications.
</DocsPageParagraph>

<Heading Size="HeadingSize.Is3">
    Limit Content Length
</Heading>

<DocsPageParagraph>
    Aim for one or two lines of content. Notifications should be brief and to the point. More information can be provided through an embedded link or Button.
</DocsPageParagraph>